<!--
 * @Description: 新增/编辑用户
 * @Author: chenju
 * @Date: 2022-03-22 17:08:41
 * @LastEditors: chenju
 * @LastEditTime: 2023-02-02 15:56:24
-->
<template>
  <CDialog
    :title="title"
    destroy-on-close
    size="small"
    v-model:visible="dialogVisible"
    :loading="loading"
    @confirm="handleConfirm"
    @cancel="dialogVisible = false"
  >
    <el-form
      ref="formRef"
      class="user-dialog-form"
      :model="taskForm"
      :rules="rules"
      label-position="top"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="用户名称" prop="realName">
            <el-input v-model.trim="taskForm.realName" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="登录邮箱" prop="email">
            <el-input
              v-model.trim="taskForm.email"
              :disabled="title == '编辑用户'"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="手机号" v-if="title == '编辑用户' && !editPhone" required>
            <el-input v-model.trim="taskForm.phone" placeholder="请输入" maxlength="11" disabled />
            <el-button class="edit-btn" text type="primary" @click="handleEditPhone"
              >编辑</el-button
            >
          </el-form-item>
          <el-form-item label="手机号" prop="phone" v-else>
            <el-input v-model.trim="taskForm.phone" placeholder="请输入" maxlength="11" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </CDialog>
</template>
<script lang="ts">
export default {
  name: 'AddOrEditUserDialog'
};
</script>
<script lang="ts" setup>
import { defineProps, withDefaults, defineEmits, computed, Ref, ref, watch, reactive } from 'vue';
import { CDialog } from '@/components/CDialog';
import { useMessage } from '@/hooks/useMessage';
import { rules } from './rules';
import { createSupplierUser, editSupplierUser } from '@/apis/system/config/supplier';
import { useRoute } from 'vue-router';
import { IUser } from '@/apis/system/config/model/supplierModel';
interface SelectFillTypeDialogProps {
  visible: boolean;
  info: undefined | IUser;
}

const props = withDefaults(defineProps<SelectFillTypeDialogProps>(), {});
const emit = defineEmits(['update:visible', 'refresh']);
const route = useRoute();
const { supplierNo, supplierName } = route.query;
const dialogVisible = computed<boolean>({
  get: () => {
    return props.visible;
  },
  set: val => {
    emit('update:visible', val);
  }
});
const title = computed(() => {
  if (props.info) {
    return '编辑用户';
  } else {
    return '新增用户';
  }
});
const loading = ref(false);
const { createMessage } = useMessage();
let taskForm = reactive({
  realName: '',
  email: '',
  phone: '',
  userId: ''
});
const formRef = ref();
watch(
  () => dialogVisible.value,
  visible => {
    if (visible) {
      init();
    } else {
      formRef.value?.resetFields();
      initForm();
    }
  }
);
const editPhone = ref(false);
const handleEditPhone = () => {
  editPhone.value = true;
  taskForm.phone = '';
};
// 初始化
function init() {
  if (props.info) {
    editPhone.value = false;
    taskForm.userId = String(props.info.userId);
    taskForm.realName = props.info.realName;
    taskForm.email = props.info.email;
    taskForm.phone = props.info.phone;
  }
}
// 初始化表单
function initForm() {
  taskForm.realName = '';
  taskForm.email = '';
  taskForm.phone = '';
}

// 提交
function handleConfirm() {
  formRef.value?.validate((valid: boolean) => {
    if (valid) {
      loading.value = true;
      const params = {
        realName: taskForm.realName
      };
      if (props.info) {
        let editParams = Object.assign(params, {
          userId: props.info.userId,
          phone: editPhone.value ? taskForm.phone : null
        });
        editSupplierUser(editParams)
          .then(() => {
            createMessage.success('编辑用户成功');
            dialogVisible.value = false;
            emit('refresh');
          })
          .finally(() => {
            loading.value = false;
          });
      } else {
        let createParam = Object.assign(params, {
          email: taskForm.email,
          enterpriseNo: supplierNo as string,
          enterpriseName: supplierName as string,
          phone: taskForm.phone
        });
        createSupplierUser(createParam)
          .then(() => {
            createMessage.success('新增用户成功');
            dialogVisible.value = false;
            formRef.value?.resetFields();
            emit('refresh');
          })
          .finally(() => {
            loading.value = false;
          });
      }
    }
  });
}
</script>
<style lang="scss" scoped>
.edit-btn {
  position: absolute;
  right: 0;
  top: -30px;
}
</style>
